<template>
  <div class="lb-add-classify">
    <top-nav/>
    <div class="form-search">
      <el-form @submit.native.prevent :model="ruleForm" ref='ruleForm' :rules="rules" label-width="120px">
        <el-form-item label="课程名称" prop="curriculum_id">
          <el-select v-model="ruleForm.curriculum_id" placeholder="请选择">
            <el-option v-for="item in curriculumList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店名称" prop="company_id">
          <el-select v-model="ruleForm.company_id" placeholder="请选择" @change="handerCompanyChange">
            <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店地址" prop="addr">
          <el-input v-model="ruleForm.addr" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="教练名称" prop="staff_id">
          <el-select v-model="ruleForm.staff_id" filterable placeholder="请选择" :filter-method="getCardList">
            <el-option v-for="item in cardList" :key="item.user_id" :label="item.name" :value="item.user_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程日期" prop="begins_time">
          <el-date-picker v-model="ruleForm.begins_time" value-format="timestamp" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上课时间" prop="start_time">
          <el-time-picker v-model="ruleForm.start_time" value-format="HH:mm" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item>
          <lb-button type='primary' @click="submit">{{$t('action.submit')}}</lb-button>
          <lb-button @click="goBack">{{$t('action.back')}}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: '',
      ruleForm: {
        curriculum_id: '',
        company_id: '',
        address: '',
        staff_id: '',
        begins_time: '',
        start_time: ''
      },
      rules: {
        title: { required: true, message: '请输入分类名', trigger: 'blur' },
        pid: { required: true, message: '请选择分类', trigger: 'blur' },
        cover: { required: true, message: '请上传图片', trigger: 'blur' },
        top: { required: true, message: '请输入排序值', trigger: 'blur' }
      },
      curriculumList: [],
      companyList: [],
      cardList: []
    }
  },
  created () {
    this.getSelectOptions()
    let { id } = this.$route.query
    if (id) {
      this.id = id
      this.getInfo()
    }
  },
  methods: {
    /**
     * @method 保存
     */
    async submit () {
      let param = this.$util.pick(this.ruleForm, [
        'curriculum_id',
        'company_id',
        'addr',
        'staff_id',
        'begins_time',
        'start_time',
        'id'
      ])
      param.start_time = param.start_time.join('-')
      param.begins_time = param.begins_time / 1000
      await this.$api.saveCoursePlan(param)
      this.$message.success('添加成功')
      this.goBack()
    },
    /**
     * @method 获取分类下拉框的值
     */
    async getSelectOptions () {
      let res = await this.$api.getShopAndCourse()
      this.companyList = res.data.company
      this.curriculumList = res.data.curriculum
    },
    /**
     * @method 获取详情
     */
    async getInfo () {
      let res = await this.$api.getCoursePlanInfo({ id: this.id })
      let ruleForm = res.data
      console.log(ruleForm.start_time)
      ruleForm.start_time = ruleForm.start_time.split('-')
      ruleForm.begins_time = ruleForm.begins_time * 1000
      this.ruleForm = ruleForm
      this.cardList = [
        { name: ruleForm.card_name, user_id: ruleForm.staff_id }
      ]
    },
    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.back(-1)
    },
    handerCompanyChange (id) {
      let item = this.companyList.find(item => {
        return item.id === id
      })
      this.ruleForm.addr = item && item.addr
      this.ruleForm.company_name = item && item.name
    },
    async getCardList (keyword) {
      let res = await this.$api.searchCardInfo({ keyword })
      let cardList = res.data
      let defaultCardList = [
        { name: this.ruleForm.card_name, user_id: this.ruleForm.staff_id }
      ]
      this.cardList = cardList.length > 0 ? cardList : defaultCardList
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-add-classify {
  width: 100%;
  .form-search {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-input {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
      .item-tips {
        margin-left: 120px;
        margin-bottom: 24px;
        color: #999999;
      }
    }
  }
}
</style>
